
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN">
<title>商品放大镜</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="" />

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./common.js"></script>

<link href="./common.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
  $(document).ready(function(){
	  var showproduct = {
		  "boxid":"showbox",
		  "sumid":"showsum",
		  "boxw":400,//宽度,该版本中请把宽高填写成一样
		  "boxh":400,//高度,该版本中请把宽高填写成一样
		  "sumw":60,//列表每个宽度,该版本中请把宽高填写成一样
		  "sumh":60,//列表每个高度,该版本中请把宽高填写成一样
		  "sumi":7,//列表间隔
		  "sums":5,//列表显示个数
		  "sumsel":"sel",
		  "sumborder":1,//列表边框，没有边框填写0，边框在css中修改
		  "lastid":"showlast",
		  "nextid":"shownext"
		  };//参数定义	  
	 $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
  });
</script>
</head>

<body>
<div style="width:600px; margin:0 auto;">
<p>商品详情页商品放大镜效果，兼容IE6及以上版本</p>
<p style="padding-bottom:50px;">图片标签上请务必注意width和height的值，这是必要的值，图片随意形状，随意大小，但必须填写该两个值，图片个数大于1就行，数量不固定</p>
<!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
<div id="showbox">
  <img src="./1.jpg" width="270" height="180" class="lunbo" />
  <img src="./2.jpg" width="430" height="430" class="lunbo" />
</div><!--展示图片盒子-->
<div id="showsum"></div><!--展示图片里边-->
<p class="showpage">
  <a href="javascript:void(0);" id="showlast" style="background-image: url(./right.png);background-repeat:  no-repeat;"></a>
  <a href="javascript:void(0);" id="shownext" style="background-image: url(./left.png);background-repeat:  no-repeat;"></a>
</p>

</div>
</body>
</html>
